<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<div id="log"></div>
<script>
test(() => assert_selection(
    [
        '<div contenteditable>',
            'a|<span style="white-space:pre">\t\t\t</span>z',
        '</div>',
    ].join(''),
    selection => {
        selection.document.execCommand('insertLineBreak');
        selection.document.execCommand('insertText', false, 'x');
    },
    [
        '<div contenteditable>',
            'a<br>x|<span style="white-space:pre">\t\t\t</span>z',
        '</div>',
    ].join('')),
    'Insert newline and a character before tabspan');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'a<span style="white-space:pre">\t|\t\t</span>z',
        '</div>',
    ].join(''),
    selection => {
        selection.document.execCommand('insertLineBreak');
        selection.document.execCommand('insertText', false, 'x');
    },
    [
        '<div contenteditable>',
            'a<span style="white-space:pre">\t</span><br>',
            'x|<span style="white-space:pre">\t\t</span>z',
        '</div>',
    ].join('')),
    'Insert newline and a character in tabspan');

test(() => assert_selection(
    [
        '<div contenteditable>',
            'a<span style="white-space:pre">\t\t\t|</span>z',
        '</div>',
    ].join(''),
    selection => {
        selection.document.execCommand('insertLineBreak');
        selection.document.execCommand('insertText', false, 'x');
    },
    [
        '<div contenteditable>',
            'a<span style="white-space:pre">\t\t\t</span><br>x|z',
        '</div>',
    ].join('')),
    'Insert newline and a character after tabspan');
</script>
